import { ITodoData } from "./js/typing";
import TodoTemplate from "./TodoTemplate";

export default class TodoDom extends TodoTemplate {
    private todoWrapper
    private inputDom!: HTMLInputElement
    constructor(todoWrapper: HTMLElement, inputDom: HTMLInputElement) {
        super()
        this.inputDom = inputDom
        this.todoWrapper = todoWrapper
    }

    initDom(todoData: ITodoData[]) {
        todoData.map((ITodoData: ITodoData) => {
            this.addDom(ITodoData)
        })
    }


    addDom(todoItem: ITodoData): void {
        const todoDom = this.todoView(todoItem)
        this.todoWrapper.insertAdjacentHTML('beforeend', todoDom);
        this.inputDom.value = ''
    }

    removeDom(id: number): void {
        const liDom = document.querySelector(`#li-${id}`)!
        liDom.remove()
    }

    changeCompleteDom(id: number, completeStutas: boolean): void {
        const liDom: HTMLElement = document.querySelector(`#li-${id}`)!
        liDom.style.textDecoration = completeStutas ? 'line-through' : 'none'
    }
}